<template>
	<div>
		<div class="bt_search_box">
			<div class="bt_search_head">
				<div style="font-size:16px;">
					<i class="el-icon-search"></i>
					筛选搜索
				</div>
				<div>
					<el-button size="small">重置</el-button>
					<el-button size="small" type="primary" @click="seachHandler">查询结果</el-button>
				</div>
			</div>
			<el-form 
			:inline="true"
				:model="queryParam"
			>
			<div class="bt_form_br">
				  <el-form-item label="输入搜索:">
				    <el-input size="small" @keydown.enter.native="seachHandler" v-model="queryParam.keyword" placeholder="商品名称"></el-input>
				  </el-form-item>
				  <el-form-item label="商品货号:">
				    <el-input size="small" v-model="queryParam.productSn" placeholder="商品货号"></el-input>
				  </el-form-item>
				  <el-form-item label="商品分类:">
				    <!-- <el-input size="small" v-model="queryParam.keyword" placeholder=""></el-input> -->
				 
					<el-cascader
					size="small"
						 v-model="value"
						 :options="options"
						 :props="{value:'id',label:'name'}"
						 @change="changeCateHandler"
					>
						
					</el-cascader>
				  </el-form-item>
			</div>
			<div class="bt_form_br">
				  <el-form-item label="商品品牌:">
				    <!-- <el-input size="small" v-model="queryParam.keyword" placeholder="选择品牌"></el-input> -->
					<el-select
						v-model="queryParam.brandId"
						placeholder="请选择品牌"
					>
						 <el-option
							v-for="item in brandList"
							:label="item.name"
							:value="item.id"
						 ></el-option>
						
					</el-select>
				  </el-form-item>
				  <el-form-item label="上架状态:">
				    <el-input size="small" v-model="queryParam.keyword" placeholder="全部"></el-input>
				  </el-form-item>
				  <el-form-item label="审核状态:">
				    <el-input size="small" v-model="queryParam.keyword" placeholder="全部"></el-input>
				  </el-form-item>
			</div>	  
			</el-form>
		</div>
		<div class="bt_list_box">
			<!-- 
				el-table 			表格组件
					:data  			表格组件对应的数据，要展示哪些数据
					 border 		边框
					 style="width: 100%"
				el-table-column
				 
					
			 -->
			<el-table
				 :data="tableData"
				 border
			>
			  <el-table-column
				  prop="id"
				  label="编号"
				  align="center"
				  width="120">
				</el-table-column>
			<el-table-column
			  align="center"
			  label="商品图片"
			  width="120">
				<template v-slot="vs">
					<img width="50" height="70" :src="vs.row.pic"/>
				</template>
			</el-table-column>
			<el-table-column
							  prop="name"
							  align="center"
							  label="商品名称"
							  width="180">
							</el-table-column>
			<el-table-column
							  prop="id"
							  align="center"
							  label="价格/货号"
							  width="120">
				<template v-slot="vs">
					<p>价格：¥{{vs.row.price}}</p>
					<p>货号：{{vs.row.productSn}}</p>
				</template>
							</el-table-column>
			<el-table-column
							  label="标签"
							  align="center"
							  width="120">
							  <template v-slot="vs">
								  <p>上架：
								  <el-switch
								    v-model="v1"
								    active-color="#13ce66"
								    inactive-color="#ff4949">
								  </el-switch></p>
								  <p>新品：
								  <el-switch
								    v-model="v2"
								    active-color="#13ce66"
								    inactive-color="#ff4949">
								  </el-switch></p>
								  <p>推荐：
								  <el-switch
								    v-model="v3"
								    active-color="#13ce66"
								    inactive-color="#ff4949">
								  </el-switch></p>
							  </template>
							</el-table-column>

			<el-table-column
							  prop="sort"
							  label="排序"
							  align="center"
							  width="80">
							</el-table-column>

			<el-table-column
							  align="center"
							  label="sku库存"
							  width="80">
							  <template v-slot="vs">
								    <el-button type="primary" icon="el-icon-edit" circle></el-button>
							  </template>
							</el-table-column>

			<el-table-column
							  prop="sale"
							  align="center"
							  label="销量"
							  width="120">
							</el-table-column>

			<el-table-column
							  label="审核状态"
							  align="center"
							  width="120">
							</el-table-column>

			<el-table-column
							  label="操作"
							  align="center"
							  width="180">
							</el-table-column>
							
			</el-table>
			<!-- 
					el-pagination 		分页组件(名字)
						@size-change 		页大小发生改变触发的事件
						@current-change 	当前页码发生改变触发的事件
						:current-page 		当前页码
						:page-sizes 		页大小的集合
						:page-size 			默认页大小
						layout 				布局
						:total 				总共有多少条数据
						
						
						
			 -->
			 <el-pagination
			      :current-page="queryParam.pageNum"
				  @size-change="handleSizeChange"
				  @current-change="handleCurrentChange"
			      :page-sizes="[2, 3, 5, 10]"
			      :page-size="3"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="total">
			    </el-pagination>
		</div>
		
	</div>
</template>

<script>
	import {getProductList} from '@/api/product.js'
	import {getPmsCateWithChildren} from '@/api/productcate.js'
	import {getBrandList} from '@/api/productbrand.js'
	export default {
		data(){
			return {
				v1:null,v2:null,v3:null,
				queryParam:{
					pageNum:1,
					pageSize:3,
					brandId:null,
					keyword:'',
					productCategoryId:null,  // 产品分类id
					productSn:'',  //商品货号
					publishStatus:null,//上架状态 0->下架；1->上架
					verifyStatus:null	//审核状态：0->未审核；1->审核通过
				},
				total:0,
				tableData:[],
				value:[],
				options:[],
				brandList:[]   //品牌数据列表
			}
		},
		methods:{
			handleSizeChange(data){
				this.queryParam.pageSize = data;
				this.getPlist();
			},
			handleCurrentChange(data){
				//页码发生改变了，重新发请求那数据啊
				this.queryParam.pageNum = data;
				this.getPlist();
			},
			getPlist(){
				getProductList(this.queryParam)
				.then(resp=>{
					console.log("resp",resp)
					this.tableData = resp.data.list;
					this.total = resp.data.total;
				})
			},
			changeCateHandler(data){
				console.log(data);
				this.queryParam.productCategoryId = data[1];
			},
			seachHandler(){
				this.queryParam.pageSize = 3;
				this.queryParam.pageNum = 1;
				this.getPlist();
			}
		},
		mounted() {
			this.getPlist();
			
			//获取所有的一级分类以及子分类
			getPmsCateWithChildren()
			.then(data=>{
				this.options = data.data;
			})
			
			//获取所有的品牌数据
			getBrandList()
			.then(data=>{
				this.brandList = data.data;
			})
		}
	}
</script>

<style scoped="scoped">
	*{font-size:12px;}
	.bt_search_head{
		display:flex;
		justify-content: space-between;
		padding:0px 30px;
		padding-top:20px;
	}
	.bt_search_box{
		border:2px solid #ccc;
		margin:20px 10px;
	}
	.bt_list_box{
		border:2px solid #ccc;
		margin:20px 10px;
		
	}
	.el-form{
		padding:20px 0px;
	}
	.el-form .bt_form_br{
		display:flex;
		margin:10px 0;
		padding-left:50px;
	}
	.el-form .el-form-item{
		flex:1;
		padding:0;
		margin:0;
	}
</style>
